<template>
  <div class="app-container">
    <el-row>
      <el-button type="primary" @click="refreshFunc">刷新数据</el-button>
      <el-button type="primary" @click="export2Excel" >导出</el-button>
    </el-row>
    <template>
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="number"
          label="序号">
        </el-table-column>

        <el-table-column
          prop="name"
          label="姓名"></el-table-column>

        <el-table-column
          prop="theorys"
          label="理论知识成绩"
        ></el-table-column>
        <el-table-column
          prop="practicalOperationSum"
          label="合计"
        ></el-table-column>

        <el-table-column label="现场操作1 常见浮游植物的识别 （40分）">
          <el-table-column
            prop="subtotal1"
            label="小计"
          ></el-table-column>
          <el-table-column
            prop="operation1Referee1"
            label="裁判1"
          >
          </el-table-column>
          <el-table-column
            prop="operation1Referee2"
            label="裁判2"
          ></el-table-column>
          <el-table-column
            prop="operation1Referee3"
            label="裁判3"
          ></el-table-column>
          <el-table-column
            prop="operation1Referee4"
            label="裁判4"
          ></el-table-column>

          <el-table-column
            prop="operation1Referee5"
            label="裁判5"
          ></el-table-column>

        </el-table-column>

        <el-table-column label="现场操作2 中华绒螯蟹的解剖 （30分">
          <el-table-column
            prop="subtotal2"
            label="小计"
          ></el-table-column>
          <el-table-column
            prop="operation2Referee1"
            label="裁判1"
          ></el-table-column>
          <el-table-column
            prop="operation2Referee2"
            label="裁判2"
          ></el-table-column>
          <el-table-column
            prop="operation2Referee3"
            label="裁判3"
          ></el-table-column>
          <el-table-column
            prop="operation2Referee4"
            label="裁判4"
          ></el-table-column>

          <el-table-column
            prop="operation2Referee5"
            label="裁判5"
          >
          </el-table-column>

        </el-table-column>

        <el-table-column label="现场操作3 中华绒螯蟹的解剖 （30分）">
          <el-table-column
            prop="subtotal3"
            label="小计"
          ></el-table-column>
          <el-table-column
            prop="operation3Referee1"
            label="裁判1"
          ></el-table-column>
          <el-table-column
            prop="operation3Referee2"
            label="裁判2"
          ></el-table-column>
          <el-table-column
            prop="operation3Referee3"
            label="裁判3"
          ></el-table-column>
          <el-table-column
            prop="operation3Referee4"
            label="裁判4"
          ></el-table-column>

          <el-table-column
            prop="operation3Referee5"
            label="裁判5"
          ></el-table-column>

        </el-table-column>

        <el-table-column
          prop="personageScores"
          label="个人总分"
        >
        </el-table-column>

      </el-table>

      <el-row style="text-align: right; margin-right: 10px;">
        <div class="grid-content bg-purple-light">
          <el-pagination
          
            @current-change="handleCurrentChange"
            :current-page.sync="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </el-row>


    </template>
  </div>
</template>

<script>
  import {massingList, refresh,exportToExcel} from '@/api/table'

  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: [],
        pages: null,//总页数
        total: null,//总条数
        pageNum: 1,//当前页
        listLoading: true,
        pageSize: 15,
        listLoading: true,
      }
    },
    methods: {
      refreshFunc() {
        this.listLoading = true
        refresh().then(response => {
          massingList(this.pageNum, this.pageSize).then(response => {
            this.pages = response.data.pages
            this.total = response.data.total
            this.pageNum = response.data.pageNum
            this.list = response.data.list
            this.listLoading = false
            this.$message({
              message: "刷新成功",
              type: 'success'
            });
          }).catch(e => {
            this.listLoading = false
            this.$message.error('刷新失败');
          })
        })
      },
      getList() {
        massingList(this.pageNum, this.pageSize).then(response => {
          this.pages = response.data.pages
          this.total = response.data.total
          this.pageNum = response.data.pageNum
          this.list = response.data.list
          this.listLoading = false
        }).catch(e => {
          this.listLoading = false
        })
      },
      export2Excel(){
      	/*导出数据*/
      window.open("/api/skillscontest/export")
      
      },
      handleCurrentChange(e){
      	 this.getList(e)
      },
    },
    created() {
      this.getList()
    }
  }
</script>
<style>

  .el-table {
    font-size: 10px;
  }

  .el-table td, .el-table th {
    text-align: center;
  }
</style>
